<template>
  <div>
    <el-form-item>
      <el-select
        v-if="show_grade_type && categoryFlag"
        @change="changeSchoolType"
        v-model="schoolType"
        filterable
        clearable
        placeholder="请选择阶段">
        <el-option
          v-for="item in schoolTypeList"
          :key="item.id"
          :label="item.value"
          :value="item.code">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-select
        v-if="show_grade_type && categoryFlag"
        v-model="gradeType"
        filterable
        clearable
        @change="changeGradeTypeApi"
        placeholder="请选择年级">
        <el-option
          v-for="item in gradeTypeList"
          :key="item.id"
          :label="item.value"
          :value="item.code">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-select
        v-if="show_input && categoryFlag"
        v-model="subjectId"
        filterable
        clearable
        placeholder="请选择科目">
        <el-option
          v-for="item in subjectList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>


    <el-form-item v-if="show_input">
       <el-input v-model="keyWord" placeholder="输入题目内容" type="text"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button v-if="hasPermission([permission])" type="success" icon="el-icon-search" @click="searchQuestion" >搜索</el-button>
    </el-form-item>
  </div>
</template>

<script>
  import { changeSchoolTypeApi, changeGradeTypeApi } from '@/utils/education-api'
  export default {
    name: 'educationSearch',
    props: {
      show_school_type: {
        type: Boolean,
        default: false
      },
      permission: {
        type: String,
        default: ''
      },
      show_grade_type: {
        type: Boolean,
        default: false
      },
      show_subject: {
        type: Boolean,
        default: false
      },
      show_input: {
        type: Boolean,
        default: false
      }

     /* treeLanguagePointsList: {
        type: Array,
        default: false
      } */
    },

    mounted () {
      this.getTreeLanguagePoints()
      this.getSchoolTypeList()
      this.getGradeTypeList()
      this.getSubjectList()
    },

    data () {
      return {
        category: '',
        categoryList: [{
          value: '1',
          label: '课程试题'
        }, {
          value: '2',
          label: '试卷试题'
        }],
        gradeType: '',
        schoolType: '',
        subjectId: '',
        keyWord: '',
        categoryFlag: true,
        queryLanguagePointsArrayId: [],
        schoolTypeList: [],
        gradeTypeList: [],
        subjectList: [],
        treeLanguagePointsList: []
      }
    },
    watch: {
      treeLanguagePointsList (val) {
        this.treeLanguagePointsData = val
      },

      subjectId (val) {
        this.getTreeLanguagePoints()
      },

      gradeType (val) {
        this.getTreeLanguagePoints()
      }
    },

    methods: {

      changeCategory (val) {
        if (val === '3') {
          this.categoryFlag = false
        } else {
          this.categoryFlag = true
        }
     //   this.$emit('afterChangeCategory', val)
      },

      getTreeLanguagePoints () {
        let that = this
        that.axios.get(that.$http.httpUrl('/system/languagePoints'), {
          params: {
            sqlId: 'language.points.treeList',
            gradeType: that.gradeType,
            subjectId: that.subjectId
          }
        }).then(function (response) {
          that.treeLanguagePointsList = response.data
        })
      },

      getSubjectList () {
        let that = this
        that.axios.get(that.$http.httpUrl('/system/subject/list'), {
          params: {
            sqlId: 'system.subject.list'
          }
        }).then(function (response) {
          that.subjectList = response.data.data
        })
      },

      getSchoolTypeList () {
        let that = this
        that.axios.get(that.$http.httpUrl('/api/pagination'), {
          params: {
            'sqlId': 'system.dict.get',
            'type': 'school_type'
          }
        }).then(function (response) {
          that.schoolTypeList = response.data.data
        })
      },

      // 选中阶段
      changeSchoolType (val) {
        let that = this
        if (that.gradeType) {
          that.gradeType = ''
        }
        changeSchoolTypeApi(val, function (data) {
          that.gradeTypeList = data
        })
      },

      changeGradeTypeApi (val) {
        let that = this
        if (that.subjectId) {
          that.subjectId = ''
        }
        changeGradeTypeApi(val, function (data) {
          that.subjectList = data
        })
      },
      searchQuestion () {
        let languagePointsId = null
        if (this.queryLanguagePointsArrayId.length > 0) {
          let length = this.queryLanguagePointsArrayId.length
          languagePointsId = this.queryLanguagePointsArrayId[length - 1]
        }
        let form = {
          schoolType: this.schoolType,
          gradeType: this.gradeType,
          subjectId: this.subjectId,
          keyWord: this.keyWord,
          category: this.category,
          languagePointsId: languagePointsId
        }
        this.$emit('click', form)
      },

      getGradeTypeList () {
        let that = this
        that.axios.get(that.$http.httpUrl('/api/pagination'), {
          params: {
            'sqlId': 'system.dict.get',
            'type': 'grade_type'
          }
        }).then(function (response) {
          that.gradeTypeList = response.data.data
        })
      }
    }
  }
</script>
